import { useState, useEffect } from "react";

import { InputNumber, Card, Space, Typography, Checkbox } from "antd";
import { InputHandle, OutputHandle, NodeContainer } from "./NodeBase";
const { Text } = Typography;

function ImageSharpenNode({ data }) {
  useEffect(() => {
    if (data.options.alpha === undefined) {
      data.options.alpha = 0;
    }

    if (data.options.field === undefined) {
      data.options.field = 8;
    }
  }, []);

  function onChange(value) {
    data.options.alpha = value;
    console.log("onChange", value);
  }

  function onSelectionChange(e) {
    data.options.field = Number(e.target.value);
    console.log("onChange", data.options.field);
  }

  return (
    <div>
      <InputHandle label="image" id="0" />
      <OutputHandle label="image" id="0" />

      <Card title="锐化" hoverable={true} size="small">
        <Space direction="vertical">
          <select
            onChange={onSelectionChange}
            className="Select"
            defaultValue={8}
          >
            <option value={4}>4邻域</option>
            <option value={8}>8邻域</option>
          </select>

          <InputNumber
            max={5}
            min={0}
            defaultValue={0}
            onChange={onChange}
            size="small"
          />
        </Space>
      </Card>
    </div>
  );
}

//线性拉伸
const tipText = {
  up_down: "-255 ~ 255",
  reverse: "反色",
  adjustContrast: "0.1 ~ 10",
};
function ImageLinearEnhancement({ data }) {
  function onSelectionChange(e) {
    data.options.operation = e.target.value;
    setOperation(data.options.operation);
    console.log(data.options.operation);
  }

  function onValueChange(value) {
    data.options.value = value;
    console.log(data.options.value);
  }
  useEffect(() => {
    if (data.options.operation === undefined) {
      data.options.operation = "up_down";
    }
    if (data.options.value === undefined) {
      data.options.operation = 1;
    }
  }, []);

  const [operation, setOperation] = useState("up_down");

  return (
    <>
      <InputHandle label="image" id="0" />
      <OutputHandle label="image" id="0" />

      <Card title="线性变换" hoverable={true} size="small">
        <Space direction="vertical">
          <select
            onChange={onSelectionChange}
            className="Select"
            defaultValue={8}
          >
            <option value={"up_down"}>上下移</option>
            <option value={"reverse"}>反色</option>
            <option value={"adjustContrast"}>调整对比度</option>
          </select>

          <InputNumber
            max={255}
            min={-255}
            defaultValue={1}
            onChange={onValueChange}
            size="small"
            disabled={operation === "reverse"}
          />

          <Text type="secondary">{tipText[operation]}</Text>
        </Space>
      </Card>
    </>
  );
}

function ImageNonLinearEnhancement({ data }) {
  useEffect(() => {
    if (data.options.showCurve === undefined) {
      data.options.showCurve = false;
    }
    if (data.options.value === undefined) {
      data.options.value = 40;
    }
  }, []);
  function onChange(e) {
    data.options.showCurve = e.target.checked;
    console.log(data.options.showCurve);
  }
  function onValueChange(value) {
    data.options.value = value;
    console.log(data.options.value);
  }
  return (
    <>
      <InputHandle label="image" id="0" />
      <OutputHandle label="image" id="0" />
      <Card title="非线性变换" hoverable={true} size="small">
        <Space direction="vertical">
          <Text>对数变换</Text>
          <Text type="secondary">y=c*lg(x+1)</Text>
          <InputNumber
            prefix="c"
            min={0}
            max={1000}
            defaultValue={40}
            onChange={onValueChange}
          />
          <Checkbox onChange={onChange}>显示曲线</Checkbox>
        </Space>
      </Card>
    </>
  );
}

function ImageEqualizeHist({data}){
  return (
    <>
      <InputHandle label="image" id="0" />

      <OutputHandle label="image" id="0" />

      <NodeContainer title="直方图均衡" />
    </>
  );
}

export { ImageSharpenNode, ImageLinearEnhancement, ImageNonLinearEnhancement, ImageEqualizeHist };
